<template>
  <div class="community-root">
    <van-nav-bar title="社区" left-arrow @click-left="$router.goBack()" fixed />

    <div class="main-box">
      <div class="title">直属人数</div>
      <div class="line flex">
        <div class="col">
          <div class="num">6</div>
          <div class="name flex">
            <img src="@/assets/images/community/1.png" alt="" />
            <span>已激活</span>
          </div>
        </div>

        <div class="col">
          <div class="num">6</div>
          <div class="name flex">
            <img src="@/assets/images/community/1.png" alt="" />
            <span>未激活</span>
          </div>
        </div>
      </div>
    </div>

    <div class="main-box">
      <div class="title">隶属人数</div>
      <div class="line flex">
        <div class="col">
          <div class="num">6</div>
          <div class="name flex">
            <img src="@/assets/images/community/2.png" alt="" />
            <span>直属总盈利</span>
          </div>
        </div>

        <div class="col">
          <div class="num">6</div>
          <div class="name flex">
            <img src="@/assets/images/community/2.png" alt="" />
            <span>直属今日盈利</span>
          </div>
        </div>
      </div>
    </div>

    <div class="main-box">
      <div class="title">社区人数</div>
      <div class="line flex">
        <div class="col">
          <div class="num">6</div>
          <div class="name flex">
            <img src="@/assets/images/community/2.png" alt="" />
            <span>社区总盈利</span>
          </div>
        </div>

        <div class="col">
          <div class="num">6</div>
          <div class="name flex">
            <img src="@/assets/images/community/2.png" alt="" />
            <span>社区今日盈利</span>
          </div>
        </div>
      </div>
    </div>

    <div class="main-box">
      <div class="title">直属用户</div>

      <div class="tab-box">
        <div class="header flex-btw">
          <div class="col">序号</div>
          <div class="col">账号</div>
          <div class="col">是否激活</div>
          <div class="col">直属人数</div>
          <div class="col">社区</div>
          <div class="col">注册时间</div>
        </div>

        <div
          class="item flex-btw"
          :style="index % 2 == 0 ? 'background: #eee' : 'background: #ddd7fb;'"
          v-for="(item, index) in tabList"
          :key="index"
        >
          <div class="col">1</div>
          <div class="col">zhibite15</div>
          <div class="col">是</div>
          <div class="col">是</div>
          <div class="col">4</div>
          <div class="col">2021-03-01</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabList: [{}, {}, {}],
    };
  },
};
</script>

<style lang="scss" scoped>
.community-root {
  background: url("../../assets/images/community/bg.png");
  background-size: 100%;
  background-position: 0 0.88rem;
  font-size: 0.2rem;
  padding-bottom: 0.3rem;

  .main-box {
    position: relative;
    background-color: RGBA(47, 86, 230, 0.8);
    margin-left: 0.3rem;
    margin-right: 0.3rem;
    padding: 0.37rem 0.25rem;
    margin-top: 0.8rem;

    &:nth-child(2) {
      margin-top: 4.6rem;
    }

    .title {
      position: absolute;
      width: 1.22rem;
      height: 0.37rem;
      background-color: RGBA(250, 187, 28, 1);
      color: #fff;
      border-radius: 0.08rem;
      position: absolute;
      top: -0.18rem;
      left: 50%;
      transform: translateX(-50%);
    }

    .line {
      background-color: #fff;
      padding: 0.3rem 0;
      border-radius: 0.1rem;
      .col {
        flex: 1;
        margin-left: 1rem;
        .num {
          font-size: 0.3rem;
          color: #4495ed;
          text-align: left;
          margin-bottom: 0.22rem;
        }
        .name {
          text-align: left;

          img {
            width: 0.2rem;
            height: 0.2rem;
            margin-right: 0.12rem;
          }
          span {
            color: #bfbfbf;
          }
        }
      }
    }

    .tab-box {
      padding: 0.2rem;
      background-color: #fff;
      border-radius: 0.08rem;
      .header {
        padding: 0.2rem 0.3rem;
        background-color: #ddd7fb;
      }

      .item {
        padding: 0.2rem 0.3rem;

        .col {
        }
      }
    }
  }
}
</style>
